﻿<div class="blobs-view full-height">
    <div class="screen" data-bind="visible: screen() == 'blobs'">
        <div class="grid-container" data-bind="with: blobsView">
            <header class="grid-header">
                <h2 data-bind="text: container()"></h2>
                @Html.Partial("Blobs/Filter")
            </header>
            <div class="data-grid">
                @Html.Partial("Blobs/BlobsList")
            </div>
            <div class="controls">
                <div data-bind="with: pager" class="pagination-centered">
                    @Html.Partial("Pagination")
                </div>
            </div>
        </div>
    </div>

    <div class="screen" data-bind="visible: screen() == 'containers'">
        <div class="grid-container" data-bind="with: blobContainersView">
            <header class="grid-header">
                <h2>Blob Containers</h2>
                @Html.Partial("Blobs/BlobContainerFilter")
            </header>
            <div class="data-grid">
                @Html.Partial("Blobs/BlobContainersList")
            </div>
            <div class="controls">
            </div>
        </div>
    </div>
    <div class="screen" data-bind="visible: screen() == 'pageBlobViewer'">
        <div class="grid-container" data-bind="with: pageBlobViewer">
            <header class="grid-header">
                <h2>
                    <span>Page blob: </span>
                    <span data-bind="text: container() + '/' + blob()"></span>
                </h2>
                @Html.Partial("Blobs/PageBlobControls")
            </header>
            <div class="data-grid">
                @Html.Partial("Blobs/PageBlobViewer")
            </div>
            <div class="controls">
            </div>
        </div>
    </div>
</div>
